<template>
  <div class="app-container">
    <div class="login-form">
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
        <h3 class="login-title">欢迎使用远昌管家</h3>
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            size="large"
            name="username"
            placeholder="请输入用户名"
            auto-complete="on"
            prefix-icon="el-icon-s-custom"
          />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            size="large"
            name="password"
            placeholder="请输入密码"
            auto-complete="on"
            type="password"
            show-password
            prefix-icon="el-icon-lock"
          />
        </el-form-item>
        <el-form-item prop="rememberMe">
          <el-checkbox v-model="rememberMe">记住密码</el-checkbox>
        </el-form-item>
        <!--        <el-form-item prop="verifyCode">
                  <el-row>
                    <el-input
                      v-model="loginForm.verifyCode"
                      size="large"
                      name="verifyCode"
                      placeholder="请输入验证码"
                      class="captcha-input"
                      prefix-icon="el-icon-s-claim"
                      @keyup.enter.native="handleSubmit"
                    />
                    <el-image :src="captcha" class="captcha" @click="getCaptcha" />
                  </el-row>
                </el-form-item>-->
        <el-form-item>
          <el-button
            size="large"
            :loading="loading"
            type="primary"
            style="width:100%;"
            @click.native.prevent="handleSubmit"
          >登录
          </el-button>
        </el-form-item>
      </el-form>

    </div>
  </div>
</template>

<script>
import { captcha } from '@/api/system/auth'

export default {
  name: 'Login',
  data() {
    return {
      loading: false,
      rememberMe: localStorage.rememberMe || false,
      loginForm: {
        username: localStorage.username || '',
        password: localStorage.password || '',
        verifyCode: '',
        sessionId: ''
      },
      captcha: '',
      loginRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'change' }],
        password: [{ required: true, message: '请输入密码', trigger: 'change' }]
        // verifyCode: [{ required: true, message: '请输入验证码', trigger: 'change' }]
      }
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    },
    rememberMe(val, ol) {
      if (val) {
        localStorage.rememberMe = true
        localStorage.username = this.loginForm.username
        localStorage.password = this.loginForm.password
      }
    }
  },
  mounted() {
    // this.getCaptcha()
  },
  methods: {
    handleSubmit() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            this.$store.dispatch('user/getInfo').then(() => {
              this.$router.push({ path: this.redirect || '/home' })
              this.loading = false
            })
          }).catch(() => {
            this.loading = false
            this.loginForm.verifyCode = ''
            this.loginForm.sessionId = ''
            this.getCaptcha()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getCaptcha() {
      this.loginForm.sessionId = this.generateUUID()
      captcha(this.loginForm.sessionId).then(resp => {
        if (resp.success) {
          this.captcha = resp.data
        }
      })
    },
    generateUUID() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8)
        return v.toString(16)
      })
    }
  }
}
</script>

<style scoped>
.app-container {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: cover;
  /*background-color: #ced9f1;*/
  background-image: linear-gradient(315deg, #1c2ad5 0, #2ce8d9 100%);
}

.login-form {
  width: 420px;
  height: 320px;
  padding: 25px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.2)
}

.login-title {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #000000;
}

.captcha-input {
  width: 250px;
}

.captcha {
  width: 120px;
  height: 40px;
  padding-left: 10px;
  float: right;
}
</style>
